<template>
	<div class="adm-page" :class="skin" :style="{backgroundImage: 'url(' + bg + ')'}">
		<Head @getData="getData" />
		<div class="bk-index">
			<el-row :gutter="16">
				<el-col :span="24">
					<div class="bs-panel user-panel">
						<div class="bs-panel_bd">
							<div class="user-cell flex-center">
								<div class="user-avatar">
									<img src="../../assets/images/er/default.png" >
								</div>
								<div class="flex_bd">
									<div class="user-hd">早安，袁杰松，祝你今天工作顺利</div>
									<div class="user-info">内容运营<span class="line">｜</span>蓝色光标数据科技股份有限公司-RCS商业信息部</div>
								</div>
								<ul class="user-data flex-center">
									<li>
										<div class="value"><span class="v">56</span></div>
										<div class="txt">项目数</div>
									</li>
									<li class="line"></li>
									<li>
										<div class="value"><span class="v">0</span>/24</div>
										<div class="txt">团队内排名</div>
									</li>
									<li class="line"></li>
									<li>
										<div class="value"><span class="v">2223</span></div>
										<div class="txt">项目访问</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="18">
					<div class="bs-panel">
						<div class="bs-panel_hd">
							<div class="bs-tt">进行中的项目</div>
						</div>
						<div class="proj-ing">
							<swiper class="proj-swipe" :options="swiperBanner" ref="swiperBanner">
								<swiper-slide v-for="(item,index) in projlist" :key="index">
									<div class="proj-cell" @click="projOpen">
										<div class="proj-head">
											<img src="../../assets/images/er/bell.png" ><span class="tt">{{item.title}}</span>
										</div>
										<div class="proj-intro line-2">{{item.desc}}</div>
										<div class="proj-foot">
											<div class="tag">蜂鸟项目组</div><div class="time">5小时前</div>
										</div>
									</div>
								</swiper-slide>
							</swiper>
							
						</div>
					</div>
					<div class="bs-panel">
						<div class="bs-panel_hd"><div class="bs-tt">进行中的项目</div></div>
						<ul class="proj-news">
							<li class="flex-center" v-for="(item,index) in projnews" :key="index">
								<div class="pn-pic"><img src="../../assets/images/er/t1.png" ></div>
								<div class="flex_bd">
									<div class="pn-title">林东东在凤蝶精英小分队新建项目5月地带</div>
									<div class="pn-attr">
										<i class="el-icon-time"></i><span>2分钟前</span>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="bs-panel">
						<div class="bs-panel_hd"><div class="bs-tt">进行中的项目</div></div>
						<div class="bs-icons_bd">
							<ul class="proj-icons clear">
								<li v-for="(item,index) in iconlist" :key="index">
									<div class="icon-box">
										<div class="icon"><img :src="item.icon" ></div>
										<div class="text">{{item.text}}</div>
									</div>
								</li>
								<li >
									<div class="icon-box icon-add-box">
										<div class="icon"><i class="el-icon-circle-plus-outline"></i></div>
										<div class="text">添加</div>
									</div>
								</li>
							</ul>
						</div>
					</div>
					<div class="bs-panel">
						<div class="bs-panel_hd"><div class="bs-tt">XX指数</div></div>
						<div class="bs-panel_bd">
							<div class="index-echart" id="myChart"></div>
							<ul class="index-number flex-center">
								<li>
									<div class="inu-box">
										<img src="../../assets/images/er/dotblue.png" >
										<div class="t">个人</div>
										<div class="v">33</div>
									</div>
								</li>
								<li class="line"></li>
								<li>
									<div class="inu-box">
										<img src="../../assets/images/er/dotorange.png" >
										<div class="t">团队</div>
										<div class="v">33</div>
									</div>
								</li>
								<li class="line"></li>
								<li>
									<div class="inu-box">
										<img src="../../assets/images/er/dotgreen.png" >
										<div class="t">部门</div>
										<div class="v">33</div>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head
		},
		data() {
			return {
				swiperBanner: {
					observer:true, 
					observeParents:true,
					slidesPerView: 4,
					loop:true,
					slidesPerColumn: 2,
					autoplay: {
						delay: 4500,
						disableOnInteraction: false,
					},
					pagination: {
						el: '.swiper-pagination'
					},
				},
				bg:require('../../assets/images/bg4.jpg'),
				skin:"skin3",
				projnews:[
					{
						title:'林东东在凤蝶精英小分队新建项目5月地带',
						pic:require('../../assets/images/er/ic1.png'),
					},{
						title:'林东东在凤蝶精英小分队新建项目5月地带',
						pic:require('../../assets/images/er/ic1.png'),
					},{
						title:'林东东在凤蝶精英小分队新建项目5月地带',
						pic:require('../../assets/images/er/ic1.png'),
					}
				],projlist:[
					{
						title:'消息列表体验优化',
						desc:'这里是一条描述消息这里是一条描这里是一条描述消息'
					},{
						title:'消息列表体验优化',
						desc:'这里是一条描述消息这里是一条描这里是一条描述消息'
					},{
						title:'消息列表体验优化',
						desc:'这里是一条描述消息这里是一条描这里是一条描述消息'
					},{
						title:'消息列表体验优化',
						desc:'这里是一条描述消息这里是一条描这里是一条描述消息'
					},
					{
						title:'消息列表体验优化',
						desc:'这里是一条描述消息这里是一条描这里是一条描述消息'
					},{
						title:'消息列表体验优化',
						desc:'这里是一条描述消息这里是一条描这里是一条描述消息'
					},{
						title:'消息列表体验优化',
						desc:'这里是一条描述消息这里是一条描这里是一条描述消息'
					},{
						title:'消息列表体验优化',
						desc:'这里是一条描述消息这里是一条描这里是一条描述消息'
					},{
						title:'消息列表体验优化',
						desc:'这里是一条描述消息这里是一条描这里是一条描述消息'
					},{
						title:'消息列表体验优化',
						desc:'这里是一条描述消息这里是一条描这里是一条描述消息'
					},{
						title:'消息列表体验优化',
						desc:'这里是一条描述消息这里是一条描这里是一条描述消息'
					},{
						title:'消息列表体验优化',
						desc:'这里是一条描述消息这里是一条描这里是一条描述消息'
					},
					{
						title:'消息列表体验优化',
						desc:'这里是一条描述消息这里是一条描这里是一条描述消息'
					},{
						title:'消息列表体验优化',
						desc:'这里是一条描述消息这里是一条描这里是一条描述消息'
					},{
						title:'消息列表体验优化',
						desc:'这里是一条描述消息这里是一条描这里是一条描述消息'
					},{
						title:'消息列表体验优化',
						desc:'这里是一条描述消息这里是一条描这里是一条描述消息'
					},
				],
				iconlist:[
					{
						icon:require('../../assets/images/er/ic1.png'),
						text:'操作一',
					},
					{
						icon:require('../../assets/images/er/ic2.png'),
						text:'操作一'
					},
					{
						icon:require('../../assets/images/er/ic2.png'),
						text:'操作一'
					},
					{
						icon:require('../../assets/images/er/ic3.png'),
						text:'操作一'
					},
					{
						icon:require('../../assets/images/er/ic4.png'),
						text:'操作一'
					},
					{
						icon:require('../../assets/images/er/ic5.png'),
						text:'操作一'
					},
					{
						icon:require('../../assets/images/er/ic5.png'),
						text:'操作一'
					},
				]
			}

		},
		mounted() {
			this.drawLine(); //执行下面的函数
		},
		methods: {
			drawLine() {
				let myChart = this.$echarts.init(document.getElementById("myChart"));
				// 绘制图表
				myChart.setOption({
				tooltip:{
					show: true
				},
				radar:{
					radius: '80%',
					center: ['50%', '55%'],
					splitNumber: 5,
					nameGap: 10, // 图和字的间距 默认15 number
					name: {
						textStyle: {
							color: '#000',
						}
					},
					axisLine: {
						lineStyle: {
							color: '#E6E6E6'
						}
					},
					splitLine: {
						lineStyle: {
							width: 1,
							color: '#E6E6E6'
						}
					},
					splitArea: {
						areaStyle: {
							color: ['#f8f8f8', '#fff', ].reverse(),
			
						}
					},
					indicator: [{
							name: '引用',
							max: 100
						},
						{
							name: '口碑',
							max: 100
						},
						{
							name: '热度',
							max: 100
						},
						{
							name: '贡献',
							max: 100
						},
						{
							name: '产量',
							max: 100
						}
					]
				},
				series: [{
					name: 'XX指数',
					type: 'radar',
					symbolSize: 8,
					itemStyle: {},
					areaStyle: {
						normal: {
							width: 1,
							opacity: 0.3,
						},
					},
					data: [{
						itemStyle: {
							normal: {
								color: '#0083FF',
							},
						},
						value: [20, 33, 80, 50, 30]
					}, {
						itemStyle: {
							normal: {
								color: '#f9cb15',
							},
						},
						value: [54, 44, 22, 33, 55]
					}]
				}]});
			},
			getData(data1,data2) {
				this.bg = data1
				this.skin = data2
			},
			projOpen(){
			this.$message({
				message: '文字文字文字文字文字文字文字文字文字文字文字文字',
				center: true
			});
			}
		}
	}
</script>
